<template>
	<view class="shop">
		<!-- 顶部导航框 -->
		<!-- <nav-bar title="商品清单" background="rgba(0, 0, 0, 0)" color="#fff" isBack backColor="#fff"></nav-bar> -->
		<nav-bars :bgColor="background" :fontColor="fontColor" title="商品清单"></nav-bars>
		<!-- 顶部背景 -->
		<view class="s_bg"></view>
		
		<!-- 商品数据 -->
		<view class="s_data">
			<view v-for="items in list" :key="items.id">
				<view class="s_dList">
					<view class="s_dTitle">
						<view class="s_dNums">共{{items.product.length}}件</view>
						<text>{{items.cate_name}}</text>
					</view>
					<view class="s_dItems">
						<view v-for="item in items.product" :key="item.id">
							<view class="s_dItem">
								<view class="s_dImg" @click="toProduct(item.id)"><image :src="item.main_imgurl.path"></image></view>
								<view class="s_dCont">
									<view class="s_dCan" @click="toProduct(item.id)">
										<view class="s_dName omit-2">{{item.product_title}}</view>
										<view class="s_dShop omit-1">{{item.store_name}}</view>
									</view>
									<view class="s_dPrice">¥{{item.price}}</view>
									<view :id="'carItem' + item.id" class="s_dCar" @click="showSizePop(item)">
										<view class="iconfont icon-shopping"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="into_shopcart">
				<view class="into_shopcart_box">
					<!-- 左边小图标 -->
					<view class="into_icon" @click="malldcart">
						<view class="carticon"><image src="https://manager.ryz1620.com/static/demo/anlie.png"></image>进入购物车</view>
					</view>
					<!-- 右边按钮 -->
					<view class="into_btn">
						<!-- 去结算 -->
						<view class="into_settlement" @click="allcart()"><text>下单</text></view>
					</view>
				</view>
		</view>
		<!-- 弹窗-规格 -->
		<view class="Size" v-if="sizePop" @touchmove.stop.prevent>
			<view class="S_bg"></view>
			<view class="S_box">
				<view class="S_bCloak" @tap="hideSizePop"></view>
				<view class="S_bContain">
					<view class="S_bClose" @tap="hideSizePop"><view class="S_bcIcon"><text class="iconfont icon-cancel"></text></view></view>
					<view class="S_bInfo">
						<view class="S_biHead"><image :src="cartdata.main_imgurl.path" mode="aspectFit"></image></view>
						<view class="S_biCan">
							<view class="S_biRe">{{cartdata.product_title}}</view>
							<view class="S_biRemark">店铺：{{cartdata.store_name}}</view>
							<view class="S_biFee">¥<text>{{cartdata.price}}</text></view>
						</view>
					</view>
					<scroll-view class="S_bConfig" scroll-y>
						<view class="S_bcCan">
							<view class="S_bcGroup" v-for="(items,index1) in cartdata.parameter" :key="index1">
								<view class="S_bcTit">{{items.specifs}}</view>
								<view class="S_bcChecks">
									<view class="S_bcCheck" v-for="(item,index2) in items.child" @click="checkedEvent(item,index1)" :key="index1" :class="{'checked':item.checked}">{{item.specif}}</view>
								</view>
							</view>
							<view class="S_bcGroup">
								<view class="S_bcTit">数量</view>
								<view class="S_bcNums">
									<view class="S_bcMinus" @click="minusSizeCart"></view>
									<view class="S_bcNum">{{sizeNum}}</view>
									<view class="S_bcAdd" @click="addSizeCart"></view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="S_bBtns">
						<view class="S_bbBtn1" @click="addCart" style="width: 100%;">加入购物车</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 浮窗按钮 -->
		<!-- <view class="s_fixed">
			<view class="s_fBtn" id="car" @click="malldcart">
				<view class="s_fcIcon"><image src="/static/common/icon_fixed3.png"></image></view>
				<view class="s_fcNum" v-if="num > 0">{{num}}</view>
				<view class="s_fcTxt">购物车</view>
			</view>
		</view> -->
		
		<view class="s_addCar" :animation="carAnimationData_vertical" :style="{'top': carItemY + 'px', 'left': carItemX + 'px'}">
			<view class="s_addCar-can" :animation="carAnimationData_across"></view>
		</view>
		
		<view class="s_addCar">
			<fly-in-cart class="inCart" ref="inCart" :cartBasketRect="cartBasketRect"></fly-in-cart>
		</view>
	</view>
</template>

<script>

import flyInCart from "@/components/flyInCart/flyInCart.vue"
import service_design from '@/service/design'
import service_mall from '@/service/mall.js'
export default {
	data() {
		return {
			list: [],
			num: 0,
			carItemX: 0,
			carItemY: 0,
			carItemShow: false,
			caseId:'',
			sku_id:'',
			// 规格
			sizePop: false,
			sizeImage: null,   // 规格图片
			sizePrice: null,   // 规格价格
			sizeNum: 1,
			cartdata:'',
			scrollTop: 0,
			titleText: '',
			background: "rgba(0, 0, 0, 0)",
			fontColor: '#fff'
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		if (e.scrollTop >= 100) {
			this.titleText = '商品清单'
			this.background = "#fff"
			this.fontColor = "#333"
		} else {
			this.titleText = ''
			this.background = "rgba(0, 0, 0, 0)"
			this.fontColor = "#FFF"
		}
	},
	components: { flyInCart },
	
	onLoad(params) {
		this.$utils.getUrl()
		this.caseId = params.caseId
		this.getList()
	},
	

	methods: {
		addCar(event, domId) {
			this.num += 1
			this.$refs.inCart.addToCart(event, domId)
		},
		
		getList() {
			service_design.getDemoshop({case_id:this.caseId})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
                        this.list = data
					}
				})
		},
		// 弹窗-规格
		showSizePop() {
			this.sizePop = true
		},
		hideSizePop() {
			this.sizePop = false
		},
		// 弹窗-规格
		showSizePop(item) {
			this.cartdata = item
			this.sizeNum = 1
			this.sizePop = true
		},
		// 添加数量
		addSizeCart() {
			this.sizeNum++
		},
		// 商品详情
		toProduct(e){
			uni.navigateTo({ url:`/pages_mall/pages/mall/goods_details/goods_details?id=${e}` })
		},
		// 购物车
		malldcart(){
			uni.navigateTo({ url:`/pages_mall/pages/mall/cart/cart` })
		},
		// 删减购物车-规格弹窗
		minusSizeCart() {
			if (this.sizeNum > 1) this.sizeNum--
		},
		//选择规格
		checkedEvent(data,index1){
			if(data.checked){
				this.$set(data,"checked",false)
			}else{
				this.cartdata.parameter[index1].child.map(item=>{
					this.$set(item,"checked",false)
				})
				this.$set(data,"checked",true)
				this.get_keys()
			}
		},
		get_keys(){
			let keys = [];
			this.cartdata.parameter.map((item1,index1)=>{
				let checkedItem = item1.child.find(r=>r.checked)
				if(checkedItem){
					keys.push({
						key:item1.specifs,
						value:checkedItem.specif
					})
				}
			})
			this.keys = keys
			let sku = this.cartdata.sku
			for(let i = 0;i<sku.length; i++){
					if(JSON.stringify(sku[i].attribute) == JSON.stringify(keys)){
						this.sku_id= sku[i].sku_id
						this.cartdata.price = sku[i].price
						this.cartdata.rate_price = sku[i].rate_price
						this.cartdata.stockNum = sku[i].num
					}
			}	
		},
		// 一键加入购物车
		allcart(){
			let id_lst = []
			 this.list.forEach(item => {
				 for(let i=0;i<item.product.length;i++){
					id_lst.push(
						item.product[i].id
					) 
				 }	
			})
			console.log(id_lst)
			let list = id_lst.join()
			service_mall.goods_all({id_lst:list})
				.then(res => {
					if (res.code == 1) {
					  uni.showToast({ title: "添加购物车成功", icon: "success" })
					}
			})	
		},
		// 添加购物车
		addCart() {
			// 先判断库存是否足够
			if (this.cartdata.stockNum  < this.sizeNum) {
				uni.showToast({ title: '库存不足', icon: 'none' })
				return
			}
			let token = uni.getStorageSync('token');
			if(!token){
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index',
				});
			}
			if(this.cartdata.specs_type == 1 && this.cartdata.sku.length>0){//单
				this.sku_id = this.cartdata.sku[0].sku_id
			}
			if(this.cartdata.specs_type == 2 && !this.sku_id){
				uni.showToast({
				    title: '请选择规格',
					icon: 'none',
				    duration: 2000
				});
				return
			}
			
			service_mall.goods_getadd({product_id:this.cartdata.id,type:1,sku_id:this.sku_id,num:this.sizeNum || 1})
				.then(res => {
					if (res.code == 1) {
					  uni.showToast({ title: "添加购物车成功", icon: "success" })
					  this.sizePop = false
					}
			})	
		},

	}
}
</script>

<style lang="scss" scoped>


// .s_addCar {
// 	width: 52rpx;
// 	height: 52rpx;
// 	position: fixed;
// 	top: 0;
// 	left: 0;
// 	z-index: 100;
// 	.s_addCar-can {
// 		width: 52rpx;
// 		height: 52rpx;
// 		line-height: 52rpx;
// 		text-align: center;
// 		font-size: 24rpx;
// 		border-radius: 50%;
// 		background: #f9f6f3;
// 	}
// }
.s_addCar {
	position: relative;
	z-index: 1000;
}


.shop {position: relative;}

// 顶部背景=====
.shop .s_bg {width: 100vw;height: 500rpx;background: linear-gradient(181deg, #181f2b 0%, #f6f7fb 100%);position: absolute;top: 0;left: 0;z-index: 51;}


// 商品数据=====
.shop .s_data {padding: 0 32rpx 40rpx;position: relative;z-index: 52;padding-bottom: 130rpx;}
.shop .s_data .s_dList {padding: 40rpx;margin-top: 40rpx;border-radius: 16rpx;background: #fff;}
.shop .s_data .s_dTitle {height: 50rpx;line-height: 50rpx;font-size: 36rpx;font-weight: bold;}
.shop .s_data .s_dNums {font-size: 24rpx;font-weight: normal;float: right;}
.shop .s_data .s_dItems {padding-top: 20rpx;}
.shop .s_data .s_dItem {margin-top: 40rpx;overflow: hidden;position: relative;}
.shop .s_data .s_dImg {width: 178rpx;height: 178rpx;margin-right: 28rpx;border-radius: 8rpx;background: #f6f7fb;overflow: hidden;float: left;}
.shop .s_data .s_dCont {overflow: hidden;}
.shop .s_data .s_dCan {min-height: 122rpx;}
.shop .s_data .s_dName {min-height: 40rpx;line-height: 40rpx;}
.shop .s_data .s_dShop {height: 34rpx;line-height: 34rpx;font-size: 24rpx;color: #939393;margin-top: 8rpx;}
.shop .s_data .s_dPrice {height: 44rpx;line-height: 44rpx;font-size: 32rpx;font-weight: bold;margin-top: 12rpx;}
.shop .s_data .s_dCar {width: 52rpx;height: 52rpx;line-height: 52rpx;text-align: center;color: #a58f6d;font-size: 32rpx;border-radius: 50%;background: #f9f6f3;position: absolute;top: 126rpx;right: 0;}
// 弹窗-规格
.Size {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 1001;
	.S_bg {width: 100%;height: 100%;background: rgba(0, 0, 0, .8);}
	.S_box {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;flex-flow: column;}
	.S_bCloak {height: 176rpx;}
	.S_bContain {border-radius: 24rpx 24rpx 0 0;background: #fff;position: relative;overflow: hidden;display: flex;flex-flow: column;flex: 1;}
	.S_bClose {width: 104rpx;height: 120rpx;position: absolute;top: 0;right: 0;display: flex;justify-content: center;align-items: center;
		.S_bcIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;color: #000;font-size: 20rpx;border-radius: 50%;background: #f9f6f3;}
	}
	.S_bInfo {padding: 36rpx 32rpx 20rpx;
		.S_biHead {width: 178rpx;height: 178rpx;margin-right: 24rpx;border-radius: 10rpx;background: #f0f0f0;box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, .16);overflow: hidden;float: left;}
		.S_biCan {overflow: hidden;}
		.S_biFee {height: 60rpx;line-height: 60rpx;color: #e9423e;font-size: 32rpx;font-weight: bold;margin-top: 20rpx;
			& > text {font-size: 44rpx;}
		}
		.S_biTip {height: 40rpx;line-height: 40rpx;color: #e9423e;font-size: 20rpx;margin-top: 10rpx;border-radius: 4rpx;background: #feeff2;display: inline-block;
		  .yprice{margin-left: 0;}
		}
		.S_biRe{font-size: 30rpx;padding-right: 40rpx;}
		.S_biRemark {height: 28rpx;line-height: 28rpx;color: #939393;font-size: 20rpx;margin-top: 10rpx;}
	}
	.S_bConfig {overflow: hidden;flex: 1;
		.S_bcCan {padding: 0 34rpx 146rpx;}
		.S_bcGroup {padding-top: 40rpx;position: relative;
			&:first-child {padding-top: 20rpx;}
		}
		.S_bcTit {height: 40rpx;line-height: 40rpx;font-weight: bold;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
		.S_bcChecks {padding-top: 8rpx;}
		.S_bcCheck {height: 42rpx;line-height: 42rpx;color: #939393;font-size: 24rpx;padding: 0 26rpx;margin: 16rpx 16rpx 0 0;border-radius: 22rpx;background: #f5f5f5;display: inline-block;
			&.checked {color: #e9423e;background: #feeff2;}
		}
		.S_bcNums {height: 48rpx;position: absolute;top: 36rpx;right: -22rpx;display: flex;}
		.S_bcNum {width: 72rpx;height: 48rpx;line-height: 48rpx;text-align: center;border-radius: 8rpx;background: #f6f7fb;}
		.S_bcMinus, .S_bcAdd {width: 72rpx;height: 48rpx;position: relative;}
		.S_bcMinus::before, .S_bcAdd::before, .S_bcAdd::after {content: "";width: 24rpx;height: 4rpx;border-radius: 4rpx;background: #333;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
		.S_bcAdd::after {width: 4rpx;height: 24rpx;}
	}
	.S_bBtns {height: 86rpx;color: #fff;font-weight: bold;padding: 20rpx 15rpx 0;border-top: 1px solid #f8f6f3;background: #fff;position: absolute;bottom: 0;left: 0;right: 0;box-sizing: content-box;display: flex;justify-content: space-between;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
		.S_bbBtn1, .S_bbBtn2 {width: 294rpx;height: 72rpx;line-height: 72rpx;text-align: center;border-radius: 8rpx;background: #c3ab7c;margin: 0 15rpx;
			&:active {opacity: .88;}
		}
		.S_bbBtn2 {background: #333;}
	}
}

// 浮窗按钮=====
.shop .s_fixed {position: fixed;right: 32rpx;bottom: 100rpx;z-index: 53;}
.shop .s_fixed .s_fBtn {width: 108rpx;height: 108rpx;margin-top: 22rpx;border-radius: 50%;background: #fff;box-shadow: 0 0 20rpx #dedede;position: relative;
	&:active {opacity: .92;}
}
.shop .s_fixed .s_fcIcon {
	width: 40rpx;height: 40rpx;padding-top: 18rpx;margin: 0 auto;box-sizing: content-box;}
.s_fcNum {
	height: 32rpx;
	line-height: 32rpx;
	color: #fff;
	font-size: 24rpx;
	padding: 0 10rpx;
	border-radius: 16rpx;
	background: #e5675a;
	position: absolute;
	top: 0;
	right: 0;
}
.shop .s_fixed .s_fcTxt {height: 34rpx;line-height: 34rpx;text-align: center;font-size: 24rpx;}
// 固定条
.into_shopcart {
	width: 100%;
	height: 100rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 301;
	background-color: #fff;
	display: flex;
	align-items: center;
	
	&_box {
		padding: 14rpx 22rpx;
		display: flex;
		
		// 左边小图标
		.into_icon {
			display: flex;
			position: relative;
			width: 260rpx;
			.icon_store {
				width: 100rpx;
				margin-left: 30rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				
				.store {
					width: 32rpx;
					height: 30rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				text {
					font-size: 22rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: #333333;
					margin-top: 6rpx;
				}
			}
			
			.icon_service {
				width: 100rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				position: absolute;
				right: 6rpx;
				top: 2rpx;
				
				.service {
					width: 34rpx;
					height: 32rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				text {
					font-size: 22rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: #333333;
					margin-top: 6rpx;
				}
			}
			.contact_btn {
				width: 44rpx;
				height: 74rpx;
				margin-left: 46rpx;
			}
			
			button[plain] {
				border: 0 none;
			}
		}
	
		// 右边按钮
		.into_btn {
			width: 380rpx;
			height: 72rpx;
			border-radius: 10rpx;
			margin-left: 50rpx;
			display: flex;
			
			.join_cart {
				width: 226rpx;
				height: 100%;
				text-align: center;
				line-height: 72rpx;
				background-color: #C3AB7C;
				border-radius: 10rpx 0rpx 0rpx 10rpx;
				
				text {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: #FFFFFF;
				}
			}
			
			.into_settlement {
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 72rpx;
				background-color: #C3AB7C;
				border-radius: 70rpx;
				
				text {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: #FFFFFF;
				}
			}
		}
	}
}
.carticon{
	width: 250rpx;
	height: 72rpx;
	background: #F6F7FB;
	border-radius: 72rpx;
	line-height: 72rpx;
	font-size: 26rpx;
	image{
		width: 72rpx;
		height: 72rpx;
		float: left;
		margin-right: 15rpx;
	}
}
</style>